import { Carousel } from 'antd-mobile';
import React from 'react';
import store from '@/store'
class App extends React.Component {
  state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
  }
  componentDidMount() {
    // simulate img loading
    fetch(`http://jx.xuzhixiang.top/ap/api/bannerlist.php?uid=488`)
      .then(res => res.json())
      .then(data => {
        // console.log(data)
        this.setState({
          data: data.data
        })
      })
    console.log()
  }
  render() {
       if (store.getState().home.title === '要闻') {
        //  console.log(store.getState().home.Title)
        return (
            <Carousel
            autoplay={true}
            infinite
            // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
            // afterChange={index => console.log('slide to', index)}
          >
            {this.state.data.map(val => (
              <a
                key={val}
                href="http://www.alipay.com"
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={ val.banner_img_url }
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top', height: this.state.imgHeight }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: this.state.imgHeight });
                  }}
                />
              </a>
            ))}
          </Carousel>
        )
       } else {
         return (
           <div className="null"></div>
         )
       }
  }
}
export default App;